<template>
    <div class="goodslist-container">
        <!-- 第一种跳转 router-link -->
        <!-- <router-link class="goods-item" v-for="item in goodslist" :key="item.id" :to="'/home/goodsinfo/' + item.id">
            <img :src="item.img_url" alt="商品图片走丢了" />
            <div class="title">{{ item.title }}</div>
            <div class="subtitle">{{ item.zhaiyao }}</div>
            <div class="price">
                <span class="new">￥{{ item.sell_price }}</span>
                <span class="old">￥{{ item.market_price }}</span>
            </div>
            <div class="sell">
                <span class="click">被浏览了{{ item.click }}次</span>
                <span class="stock">已售{{item.stock_quantity}}件</span>
            </div>
        </router-link>         -->
        <!-- vue-router 的程序化导航，push -->
        <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="gotoInfo(item.id)">
            <img :src="item.img_url" alt="商品图片走丢了" />
            <div class="title">{{ item.title }}</div>
            <div class="subtitle">{{ item.zhaiyao }}</div>
            <div class="price">
                <span class="new">￥{{ item.sell_price }}</span>
                <span class="old">￥{{ item.market_price }}</span>
            </div>
            <div class="sell">
                <span class="click">被浏览了{{ item.click }}次</span>
                <span class="stock">剩{{item.stock_quantity}}件</span>
            </div>
        </div>
        <mt-button type="danger" size="large" @click="getgoodsmore">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from "mint-ui"

export default {
    data(){
        return {
            pageIndex:1,    // 页码
            goodslist:[]    // 商品数据数组
        }
    },
    created(){
        this.getgoodslist();    // 页面的data及methods已经加载完毕，调用 获取 商品列表 的方法
    },
    methods:{
        getgoodslist(){    // 获取 商品列表 数据
            this.$http.get("api/getgoods?pageindex=" + this.pageIndex).then(result => {
                if(result.data.status === 0){
                    this.goodslist = this.goodslist.concat(result.data.message);
                }else{
                    Toast("获取失败");
                }
            });
        },
        // vue-router 程序化导航(编程式导航)，跳转到 商品详情页面
        gotoInfo(id){
            // 1. 最简单的字符串方式   path
            // this.$router.push("/home/goodsinfo/" + id);
            // 2. 传递对象
            // this.$router.push({ path:"/home/goodsinfo/" + id });
            // 3. 传递命名的路由
            this.$router.push({ name:"goodsinfo",params:{ goodsid:id } });

            // 注意：一定要区分 this.$route 和 this.$router 这两个对象
            // this.$route 是路由 参数对象，所有路由中的参数，params，query都属于它
            // this.$router 是路由 导航对象，用它可以方便使用的JS代码，实现路由的前进、后退、跳转到新的 URL地址

            // console.log(this);
        },
        getgoodsmore(){    // 获取下一页数据，老数据 拼接 新数据 再赋给 goodslist 数组
            this.pageIndex ++;
            this.getgoodslist();
            if(this.goodslist.length % 10 != 0){
                Toast("已经没有更多数据了");
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.goodslist-container{
    padding:10px 10px 0 10px;
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
    background:#f2f2f2;
    .goods-item{
        width:49%;
        min-height:302px;
        background:#fff;
        border-radius:8px;
        box-shadow:0 0 10px rgba(0,0,0,.15);
        line-height:16px;
        margin-bottom:10px;
        padding-bottom: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        img{
            width:100%;
            min-height:174px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            border:none;
        }
        .title{
            font-size:14px;
            font-weight:normal;
            color:#333;
            margin:10px 0;
            padding:0 6px;
            width:100%;
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow: hidden;
        }
        .subtitle{
            font-size:12px;
            padding:0 6px;
            color:#999999;
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .price{
            margin:10px 0;
            padding:0 2px;
            color:#fe4f11;
            .new{
                font-weight:bold;
                font-size:16px;
            }
            .old{
                text-decoration:line-through;
                font-size:12px;
                color:#999999;
                margin-left:10px;
            }
        }
        .sell{
            display:flex;
            justify-content: space-between;
            font-size:12px;
            padding:0 6px;
            color:#999999;
        }
    }
    .mint-button--large{
        margin-bottom:10px;
    }
}
</style>